<template>
	<view class="container">
		<van-nav-bar title="挂单中心" :border='false' right-text="添加挂单" @click-right="onClickRight" />
		<view class="List">
			<view class="ListLi" v-for="item in orderList" :key="item.id">
				<view class="topLi"><text class="titleLi">收购KOI</text><text class="success">交易完成</text></view>
				<view class="time">2023年10月15日 00：33：06</view>
				<view class="content">
					<view>
						<text class="num">1000</text>
						<text class="tips">KOI收购数量</text>
					</view>
					<view>
						<text class="tips">KOI收购总数：100</text>
						<text class="tips">KOI已收购：80</text>
						<text class="tips">USDT已支出：81.3021USDT</text>
					</view>
				</view>
				<view class="btn" v-if="status === '交易中'"> <van-button @click='stop'>停止收购</van-button></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { getSerBuyOrderList, takenShelves } from '@/api/service'
	const orderList = ref([])
	onLoad(async () => {
		var { rows } = await getSerBuyOrderList()
		console.log(rows)
		orderList.value = rows
	})
	const stop = async () => {
		var res = await takenShelves({ orderNum: '' })
		console.log(res)
	}
	const onClickRight = () => {
		console.log(111)
		uni.navigateTo({
			url: '/service/addHang/index'
		})
	}
	const status = ref('')
</script>

<style lang="scss" scoped>
	.container {
		color: white;
		background-color: #121317;
		min-height: 100vh;
	}

	::v-deep.van-nav-bar__title,
	.van-ellipsis {
		font-size: 36px;
		color: white;
		font-weight: 500;
		overflow: visible;
	}

	::v-deep.van-nav-bar__content {
		height: 88px;
		background-color: #121317;
	}

	::v-deep.van-nav-bar__text {
		font-size: 28px;
		color: #21F5EA;
	}

	.List {
		padding: 40px 32px;

		.ListLi {
			padding: 32px;
			border-radius: 16px;
			background: #2a2b2e;
			margin-bottom: 20px;

			.topLi {
				display: flex;
				justify-content: space-between;

				.titleLi {
					font-size: 28px;
					color: white;
				}

				.success {
					color: red;
					font-size: 24px;
				}
			}

			.content {
				display: flex;
				justify-content: center;
				padding: 32px 0;

				view {
					width: 50%;
					height: auto;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// align-items: center;

					&:nth-of-type(1) {
						justify-content: center;

						.num {
							font-size: 40px;
						}

						.tips {
							font-size: 24px;
						}
					}

					&:nth-of-type(2) {
						.tips {
							font-size: 24px;
							margin-bottom: 10px;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

			}

			.time {
				color: #cccccc;
				// text-align: center;
				font-size: 24px;
			}

			.btn {
				display: flex;
				justify-content: center;

				.van-button {
					width: 160px;
					height: 66px;
					background: #00D0B9;
					border-radius: 8px;
					border: 0;
					font-size: 26px;

				}
			}
		}
	}
</style>